{% if wU.websocketReady %}
<div class="col-lg-4 col-12 col-xl-3 waitingUserCard mb-3 position-relative">
    <div class="position-absolut d-flex icon-holder">
        <div class="acceptSwipe feedbackSwipe"
             data-target="{{ path('lobby_moderator_accept',{'wUid':wU.uid}) }}">
            <i class="fas fa-user-check"></i>
        </div>
        <div class="denieSwipe feedbackSwipe"
             data-target="{{ path('lobby_moderator_decline',{'wUid':wU.uid}) }}">
            <i class="fas fa-user-times"></i>
        </div>
    </div>
    <div class="card ">
        <div class="card-body text-center d-flex justify-content-between flex-row flex-lg-column align-items-center">
            {% if wU.user is not null and  wU.user.profilePicture is not null %}
                <style>
                    #circle_{{ wU.id }} {
                        background-image: url("{{ vich_uploader_asset(wU.user.profilePicture,'documentFile') }}");
                        background-position: center;
                        background-size: cover;
                        background-color: white !important;
                    }
                </style>

            {% endif %}
            <div class="initialCircle d-none d-lg-block" id="circle_{{ wU.id }}">
                {% if wU.user is null or wU.user.profilePicture is  null %}
                    {% if wU.user is not null %}
                        {% if wU.user.firstName != '' %}
                            {{ wU.user.firstName[:1] }}{{ wU.user.lastName[:1] }}
                        {% else %}
                            {{ wU.user.username[:1] }}
                        {% endif %}
                    {% else %}
                        {{ wU.showName[:2] }}
                    {% endif %}
                {% endif %}
            </div>
            <div class="nameHolder">
                <div class="participantsName">{{ wU.showName }}

                </div>
                {% if wU.callerSession is not null %}
                    <div class="participantsName callerId"><i
                                class="fa fa-phone text-success"></i> {{ wU.callerSession.callerId }}</div>
                    {% if wU.callerSession.callerIdVerified %}
                        <span class="callerVerified badge badge-success">{{ 'lobby.verified'|trans }}</span>
                    {% else %}
                        <a class="callerNotVerified badge badge-danger w-100"
                           data-mdb-toggle="popover"
                           data-mdb-trigger="focus"
                           tabindex="0"
                           data-mdb-content="{{ 'lobby.notVerified'|trans }}">
                            <i class="fa-2x fa-solid fa-bolt text-warning"></i>
                        </a>
                    {% endif %}
                {% endif %}
            </div>
            <div class="buttonHolder buttons mt-lg-2 d-flex align-items-center justify-content-between">
                <a
                        data-mdb-toggle="tooltip"
                        title="{{ 'lobby.participant.tooltip.acccept'|trans }}"
                    class="btn btn-lg btn-floating senddirect btn-success d-none d-md-block"
                   href="{{ path('lobby_moderator_accept',{'wUid':wU.uid}) }}">
                    <i class="fas fa-user-check"></i>
                </a>
                <a
                        data-mdb-toggle="tooltip"
                        title="{{ 'lobby.participant.tooltip.decline'|trans }}"
                        class="btn btn-lg btn-floating directSendWithConfirm btn-danger d-none d-md-block"
                   data-text="{{ 'confirm.delete.lobbyUser'|trans }}"
                   href="{{ path('lobby_moderator_decline',{'wUid':wU.uid}) }}">
                    <i class="fas fa-user-times"></i>
                </a>


                <div class="dropdown dropstart"
                     data-mdb-toggle="tooltip"
                     title="{{ 'lobby.participant.tooltip.message'|trans }}"
                >
                    <a class="btn btn-lg btn-outline-success btn-floating"

                       data-mdb-ripple-color="dark"
                       id="dropdownMenu2"
                       data-mdb-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-solid fa-paper-plane"></i>
                    </a>
                    {% include('lobby/__lobbyMessageDropdown.html.twig') with {'url':path('lobby_send_message_to_waitinguser'),'uid':wU.uid } %}
                </div>

                <div class=" slider d-md-none">
                    <i class="fa-solid fa-left-right"></i>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}




